<template>
  <div class="login">
      <p>昵称：<input type="text" v-model="user.name"></p>
      <p>手机：<input type="text" v-model="user.mob"></p>
      <p>密码：<input type="text" v-model="user.pwd"></p>
      <p v-if="flag"><button class="gray" disabled="disabled">登录</button></p>
      <p v-else>
          <button type="button" class="green" @click="login">登录</button>
      </p>
  </div>
</template>
<script>
export default {
    data() {
        return {
            user:{
                name:'',
                mob:'',
                pwd:''
            },
            flag:true
        }
    },
    methods: {
        login(){
             let reg =/^(?:(?:\+|00)86)?1\d{10}$/
                    if(reg.test(this.user.mob)){
                        if(this.user.pwd.length>=6){
                            this.flag=false
                        }else{
                        alert('密码格式不正确')
                        this.flag=true

                        }
                    }else{
                        alert('手机号格式不正确')
                        this.flag=true
                    }
                this.$store.commit('user',this.user)
                localStorage.setItem('token',this.user.name)
                this.$router.push('/about')
        },
    },
    watch:{
        'user':{
            handler:function (val,oldval) {
                    if(this.user.name!=''&&this.user.mob!=''&&this.user.pwd!=''){
                        this.flag=false
                    }else{
                        this.flag=true
                    }
            },
            deep:true
        }
    }
}
</script>
<style lang="scss" scoped>
    .gray{
        background-color: gray;
    }
    .green{
        background-color: green;
    }
</style>>
